<template>
	<!-- 项目经历 -->
	<view class="" style="background: #F8F8FA;min-height: 100vh;">
		<view class="">
			<!-- 作品集 -->
			<view class="">
				<tn-swiper :list="swiperList" :height="750" name="url" title :radius="0"
					@click="swiperClick"></tn-swiper>
			</view>
			<view class="project-item" v-for="(item,index) in projectList" :key="index">
				<view class="z-flex z-flex-row-between">
					<view>
						<view class="z-text-bold z-text-ellipsis" style="max-width: 400rpx;">
							{{item.name}}
						</view>
						<view class="text-color3 z-text-sm">
							{{item.time}}
						</view>
					</view>
					<view class="">
						<tn-tag size="sm" backgroundColor="#01BEFF" fontColor="#ffffff" shape="radius">前端开发</tn-tag>
					</view>
				</view>
				<view class="z-margin-top-xs">
					<tn-tag v-for="(tag,i) in item.tags" :key="i" backgroundColor="#cccccc" fontColor="#ffffff"
						margin="0 10rpx 0 0 " shape="radius">{{tag}}</tn-tag>
					<view class="z-margin-top-sm">
						项目内容：
					</view>
					<view class="text-color2 z-text-content">
						<text decode>{{item.duty}}</text>
					</view>
				</view>
				<view class="z-margin-top-sm" v-if="item.covers && item.covers.length">
					<tn-image-upload :width="219" :height="219" :fileList="item.covers" disabled :showProgress="false"
						:deleteable="false" :maxCount="item.covers.length"></tn-image-upload>
				</view>
			</view>
			<view class="z-padding-bottom">
				<tn-load-more status="nomore"></tn-load-more>
			</view>
		</view>
		<zou-tabbar ref="tabbarRef" v-model="tabIndex"></zou-tabbar>
	</view>
</template>

<script>
	import zouTabbar from "@/components/zou-tabbar";
	import project from "@/mockdata/project.js";
	export default {
		components: {
			zouTabbar
		},
		data() {
			return {
				tabIndex: 1,
				loading: true,
				projectList: project.list,
				swiperList: [{
					"title": "三湘同心",
					"appid": "wx3f4fdfb23ef43693",
					"description": "",
					"url": "@/static/image/san1.png"
				}, {
					"title": "木之森·云院",
					"appid": "wx85475e622563db3a",
					"description": "一缕云烟 唤醒中式诗意之美",
					"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad318f6-bda9-4e5c-9962-7e028b4b8932/7c606638-b5d3-46b5-9506-b8e5e46841d7.jpg",
				}, {
					"title": "牵脉有人",
					"appid": "wx801c4bae58c5b3c4",
					"description": "HR专属人才库·精准招聘·上【牵脉有人】",
					"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad318f6-bda9-4e5c-9962-7e028b4b8932/61b120a1-a0fb-4ab8-8271-c2fd307aa798.png",
				}, {
					"title": "福建征兵掌上云平台",
					"appid": "wxe2cd87e763be8564",
					"description": "有志青年，当兵去",
					"url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-3ad318f6-bda9-4e5c-9962-7e028b4b8932/c17a5521-7fac-4174-97f6-ce2a54196084.png"
				}]
			}
		},
		onLoad() {
			uni.hideTabBar();
			this.projectList.forEach(item => {
				item.tags = item.tags.split(",");
			})
		},
		methods: {
			swiperClick(index) {
				let data = this.swiperList[index];
				this.toApp(data);
			},
			toApp(data) {
				uni.navigateToMiniProgram({
					appId: data.appid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-item {
		position: relative;
		width: 100%;
		height: 100%;

		&--bottom {
			width: 100%;
			position: absolute;
			bottom: 0;
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, .5));
			padding: 20rpx 20rpx 50rpx;
			color: #ffffff;
		}
	}

	.project-item {
		background: $z-white-color;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.project-cover {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	/deep/ .tn-image-upload__item-preview {
		border: none !important;
	}
</style>